<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>日历页面</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/calender.css" />
    <link rel="stylesheet" href="./css/top.css">
    <link rel="stylesheet" href="./css/cal.css">
    <link rel="stylesheet" href="./swiper/swi.css">
</head>

<body>
    <div class="top">
        <div class="top_left">
            <img src="./icon/bACK bUTTON@2x.png" alt="" onClick="javascript:history.back()">
        </div>

        <h1>日历</h1>
    </div>
    <div class="calendar">
        <div class="header">
            <button class="lastYear" title="Last year">&lt;&lt;</button>
            <button class="lastMonth" title="Last month">&lt;</button>
            <div class="currentDate"></div>
            <button class="nextMonth" title="Next month">&gt;</button>
            <button class="nextYear" title="Next year">&gt;&gt;</button>
        </div>
        <div class="days">
            <div class="day">Mon</div>
            <div class="day">Tue</div>
            <div class="day">Wed</div>
            <div class="day">Thu</div>
            <div class="day">Fri</div>
            <div class="day">Sat</div>
            <div class="day">Sun</div>
        </div>
        <div class="dates">
            <!-- <div class="date">1</div>
        <div class="date">2</div>
        <div class="date">3</div>
        <div class="date">4</div>
        <div class="date">5</div>
        <div class="date">6</div>
        <div class="date">7</div>
        <div class="date">8</div>
        <div class="date">9</div>
        <div class="date">10</div>
        <div class="date">11</div>
        <div class="date">12</div>
        <div class="date">13</div>
        <div class="date">14</div> -->
        </div>
    </div>
    <footer>
        <div class="hitokoto">:D 获取中...</div>
        <p class="from"></p>
        <div class="timeToday">111</div>
    </footer>
    <script src="./js/calendar.js"></script>
    <script src="./js/calender_script.js"></script>
    <script src="./swiper/swi.js"></script>
    <script>
        var xhr = new XMLHttpRequest();
        xhr.open('get', 'https://v1.hitokoto.cn?' + Math.random());
        // xhr.open('get', 'https://api.xygeng.cn/one/get/');

        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                let data = JSON.parse(xhr.responseText);
                let hitokoto = document.querySelector('.hitokoto');
                let from = document.querySelector('.from');
                hitokoto.innerText = data.hitokoto;
                from.innerText = `——— ${data.from}`;
            }
        }
        xhr.send();
    </script>

</body>

</html>